<template>
    <div id="app">
        <!-- <div id="nav">
           <router-link to="/">Home</router-link> |
           <router-link to="/about">About</router-link>
         </div>
         <router-view/>-->
        <!--1. 规范目录结构-->
        <!--1.1 public里面的静态资源文件是不需要做编译处理，也就是这个目录建议存放纯静态资源，而不能存放类似less sass。 less和sass文件存放 src/assets 目录下，在该目录下的预处理语言编写的 less sass ts 等文件都可以被项目的脚手架进行编译生成纯的静态的资源文件-->

        <!--2. 样式的重置-->
        <!--2.1 一些HTML标签是自带样式 body ul li a...-->
        <!--2.2 这些样式可以手工重置 *{margin:0 padding:0} a{text-decreation:none}-->
        <!--2.3 使用一些第三方现有的样式重置库-->
        <!-- 2.3.1 这两个是国际标准 reset.css normalize.css-->
        <!-- 2.3.2 国内也存在一些前端重置的标准，使用的淘宝的，新浪 网易的样式重置类-->
        <!--3. 编写公共的样式文件 common.less less 变量 $baseColor $mainColor @secondColor-->
        <!--1. 根据页面的主题的观察，定出页面的大体的字体，大小，样式-->
        <!--body-->

        <!--4. 页面底部的导航栏-->
        <!--4.1 多个页面都存在底部，则我们可以把底部提取出来实现复用-->
        <!--4.2 定义底部的导航-->
        <!--技术实现：fixed + flex-->

        <!--4.3 定义导航点击后显示的组件（四个组件，电影，影院，咨询，我的）-->
        <router-view/>

        <!--4.4 定义路由映射表-->
        <!--src/router/index.js-->

        <!--5. 完成电影首页页面-->


    </div>
</template>

<style lang="less">
    /*导入外部的 less文件 app 主组件 里面的 style 不要加上  scoped*/
    @import url("~@/assets/less/common.less");

</style>
